<template>
  <div>
    <!-- 推荐 -->
    <!-- <van-search placeholder="请输入搜索关键词" /> -->
    <!-- 搜索框 -->
 <van-search placeholder="请输入搜索关键词" />
    <!-- 官方歌单 -->
    <section class="mod">
      <!-- 歌单头 -->
      <section class="mui_tit">
        <h2 class="mui_tit__text c_txt1">官方歌单</h2>
        <a class="mui_tit__more c_txt2" href="javascript:;">更多<i class="mui_tit__arrow"></i> </a>
      </section>
      <!-- 歌单列表 -->
      <section class="mui_scroll scroll_x">
        <section class="mui_scroll__bd">
          <ul class="mui_list horizontal tit_wrap">
            <li v-for="item in officialPlaylist" :key="item.id" class="mui_list__item">
              <div class="mui_list__box" @click="toTopic(item)">
                <div class="mui_list__media">
                  <img class="mui_list__img" :src="item.cover" >
                  <div class="mui_cover_count">
                    <i class="mui_cover_count__icon"></i>
                    <span class="mui_cover_count__num">{{(item.cnt/10000).toFixed(1)+'万'}}</span>
                  </div>
                  
                </div>
                 <div class="mui_list__bd">
                  <h3 class="mui_list__tit c_txt1">{{item.title}}</h3>
                </div>
              </div>
            </li>
          </ul>
        </section>
      </section>

    </section>

  <!-- 达人歌单 -->
    <section class="mod">
      <!-- 歌单头 -->
      <section class="mui_tit">
        <h2 class="mui_tit__text c_txt1">达人歌单</h2>
        <a class="mui_tit__more c_txt2" href="javascript:;">更多<i class="mui_tit__arrow"></i> </a>
      </section>
      <!-- 歌单列表 -->
      <section class="mui_scroll scroll_x">
        <section class="mui_scroll__bd">
          <ul class="mui_list horizontal tit_wrap">
            <li v-for="item in ugcPlaylist" :key="item.id" class="mui_list__item">
              <div class="mui_list__box" @click="toTopic(item)">
                <div class="mui_list__media">
                  <img class="mui_list__img" :src="item.cover" >
                  <div class="mui_cover_count">
                    <i class="mui_cover_count__icon"></i>
                    <span class="mui_cover_count__num">{{(item.cnt/10000).toFixed(1)+'万'}}</span>
                  </div>
                </div>
                <div class="mui_list__bd">
                  <h3 class="mui_list__tit c_txt1">{{item.title}}</h3>
                </div>
              </div>
            </li>
          </ul>
        </section>
      </section>
    </section>

   <!-- 专区 -->
    <section class="mod">
      <!-- 歌单头 -->
      <section class="mui_tit">
        <h2 class="mui_tit__text c_txt1">专区</h2>
        <a class="mui_tit__more c_txt2" href="javascript:;">更多<i class="mui_tit__arrow"></i> </a>
      </section>
      <!-- 歌单列表 -->
      <section class="mui_scroll scroll_x">
        <section class="mui_scroll__bd">
          <ul class="mui_list video horizontal tit_wrap ">
            <li v-for="item in zoneList" :key="item.id" class="mui_list__item">
              <div class="mui_list__box" >
                <div class="mui_list__media">
                  <img class="mui_list__img" :src="item.cover" >
                 <div class="zone_info">
                   <div class="zone_info__bd">
                     <img class="zone_info__img" :src="item.cover"> 
                     <span class="zone_info__name">{{item.title}}</span>
                   </div>
                 </div>
                </div>
                 <div class="mui_list__bd">
                  <h3 class="mui_list__tit c_txt1">{{item.subtitle}}</h3>
                </div>
              </div>
            </li>
          </ul>
        </section>
      </section>
    </section>
  </div>
</template>

<script>
import { getRecommend,getRecommendTopic } from "@/api/recommend";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      officialPlaylist: [],
      ugcPlaylist: [],
      zoneList: [],
    };
  },
  methods: {
       ...mapMutations([
      "changeShowPlayer",
      "changePlayerState",
      "changeMusicUrl",
      "changeHeaderShow",
      "changeMusicUrls"
    ]),
    toTopic(item){
      this.$router.push({path:'/Topic?id='+item.id});
    }

  },
  activated(){
 this.changeHeaderShow({showTabs:true});
  },
  created() {
      //this.changeHeaderShow({showTabs:true});
    getRecommend().then((res) => {
       //console.log("推荐",res.data)
      const { officialPlaylist, ugcPlaylist, zoneList } = res.data.homeData;
      this.officialPlaylist = officialPlaylist;
      this.ugcPlaylist = ugcPlaylist;
      this.zoneList = zoneList;
     
    });
  },
};
</script>

<style>
@import "https://y.qq.com/mediastyle/mobile/yqq_v9/index.css?max_age=2592000"; 
</style>